<%-- 
  - Author: Neha Chauhan
  - Date: 25-Mar-2011
  - Copyright Notice: TRAKHEES
  - Description: form.jsp
 --%>

<%@ include file="/WEB-INF/view/include.jsp"%>
<%@ page import="ae.pcfc.etks.online.web.*"%>
<c:if
	test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
	<script language="Javascript"
		src='<c:url value="/resources/js/ui/jquery.ui.datepicker-ar.js"/>'></script>
</c:if>


<script type="text/javascript">

	var $tabs ;
	
	function onCityChange(){
		
		var citySelVal = $("#strCity option:selected").val();
	    $("#hiddenCityVal").val(citySelVal);
	    var cityseltd = $("#strCity option:selected").text();
        document.getElementById('strCityDisplay').value = cityseltd ;
	}
	
	function checkCity() {
		$('#strCity >option').remove();
	 	
	    $.getJSON("nonclient/company/register/city.json",{contryCode:$("#strCountry").val()},
	    	 function(data) {
	    	
	    	$.each(data,function(key,city){ 		    		
	    		<c:choose>
	    			<c:when
	    				test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
	    					var label = city.labelAr;
	    			</c:when>
	    			<c:otherwise>
	    					var label =  city.labelEn;
	    			</c:otherwise>
	   			</c:choose> 
		    		var id = city.id;
	    			$('<option/>').val(id).html(label).appendTo('#strCity');
				   
				});
	    	
	    	var cityHiddenVal = $("#hiddenCityVal").val();
	    	
	    	if(cityHiddenVal != null && cityHiddenVal != "")
	    	{
	    		//$("#strCity").val(cityHiddenVal);
	    		 try {
    			    $("#strCity").val(cityHiddenVal);
    			  }
    			  catch(ex) {
    			    //setTimeout("$('" + ctrl + "').val('" + id + "')",1);
    			    setTimeout(function(){
        			    $("#strCity").val(cityHiddenVal);
        			    var cityseltd = $("#strCity option:selected").text();
        		        document.getElementById('strCityDisplay').value = cityseltd ;        			    
    			    },1);
    			  }
  			    var cityseltd = $("#strCity option:selected").text();
		        document.getElementById('strCityDisplay').value = cityseltd ;        			    
	    	}
	    	
	    	// var cityseltd = $("#strCity option:selected").text();
	         //document.getElementById('strCityDisplay').value = cityseltd ;
	    
	    	   });
	     
		  }
	
	$('#strCity').change(function() {
		onCityChange();
		/*var newcitysel = $("#strCity option:selected").text();
        document.getElementById('strCityDisplay').value = newcitysel ;*/
    });
	
	
	function setRolePreviewText(){
		
		$('#roleDisplay').text('');
		var clientsel = $.map($('#iClientRole :selected'), function(e) { return $(e).text(); });	
        $.each(clientsel, function(key, value) { 
        	  $('#roleDisplay').append(value+'<br>');
        	});
		
	}
	function del() 
	{		
		var row = $(this).parent().parent().prevAll().length;
		var confirmMsg = '<spring:message code="form.doc.delete.confirm" />';
		jConfirm(confirmMsg,'<spring:message code="label.button.delete" />',function(result){
			if(result){
				try{
					deleteFile(row);
					var tr = $("#docTable").find("tr").get(row); 
					$(tr).remove();
				}catch(e){}
			}	
		});
		return false;
	}
	function deleteFile(row) 
	{		
		$("input:hidden[name^='arrDocumentVOs["+row+"]']").remove();
		resetArrDocs(row);
	}
	function resetArrDocs(index){
		try{
			for(var nextIndex=parseInt(index)+1;nextIndex<2;nextIndex++){
				var nextElmts = $("input:hidden[name^='arrDocumentVOs["+ nextIndex + "]']");
				if(nextElmts == null ||nextElmts.length == 0){
					return;
				}else{
					for(var elmtIdx=0;elmtIdx<nextElmts.length;elmtIdx++){
						var elmt = nextElmts[elmtIdx];
						var elmtName = $(elmt).attr('name');
						elmtName = elmtName.replace(nextIndex, nextIndex-1);
						var elmtVal = $(elmt).val();
						var newElmt = $("<input type='hidden' name='" + elmtName + "' value='" + elmtVal + "'>");
						$("#docElmts").append(newElmt);
						$(elmt).remove();
					}
				}
			}
		}catch(e){
			return false;
		}
	}
	$().ready(function() {
		
		//$("input:submit, input:reset, input:button, input:file, .view, .del").button();
		$(".deleteDoc").live("click",del);
		setRolePreviewText();
		
		if($('#strCountry').val() != "" && $('#strCountry').val() != null)
		{
			checkCity();
		}
		
		$.validator.addMethod(
		        "regex",
		        function(value, element, regexp) {
		            
		            var re = new RegExp(regexp);
		            return this.optional(element) || re.test(value);
		        },
		        "Please check your input."
		);
		
		
		$.validator.addMethod(
				"dateRange", 
				function() {
							var issueDate = new Date($("#strLicenseIssueDate").val());
	        				var expiryDate = new Date($("#strLicenseExpiryDate").val());
	        				var today = new Date();
	        				return (issueDate < expiryDate && (expiryDate > today));
	    });

		
		// declare the Tabs
		$tabs = $('#tabs').tabs({});
		

		$('#tabs').tabs({
				
			select : function(event, ui) {
				
				var selected = $tabs.tabs('option', 'selected'); // => 0
				var clicked = ui.index; // => 0
				
				if(clicked == 3){
				$('#CompanyLicense').submit(function(){
					return true;
				});
			}
				
				if( selected > clicked )
					return true;
				
				var isValid = validate();// form validation returning true or false
				return isValid;
			}
		
		
			
		});
		
		 var licissueauth = $("#strLicenseIssuingAuth option:selected").text();
	     document.getElementById('strLicenseIssueAuthDisplay').value = licissueauth ;  
	     
	     var lictype = $("#strLicenseType option:selected").text();
	     document.getElementById('strLicenseTypeDisplay').value = lictype ;  
	     
	 	$('#strCategory').change(function() {
			
	        var category = $("#strCategory option:selected").text();        
	        document.getElementById('strClientCategoryDisplay').value = category ;
	        
	    });
	     
	     
	     $('#strLicenseIssuingAuth').change(function() {
		        var licissuesel = $("#strLicenseIssuingAuth option:selected").text();
		        document.getElementById('strLicenseIssueAuthDisplay').value = licissuesel ;  
		    });
	     
	     $('#strLicenseType').change(function() {
		        var lictypesel = $("#strLicenseType option:selected").text();
		        document.getElementById('strLicenseTypeDisplay').value = lictypesel ;  
		    });
	     
	     $('#iClientRole').change(function() {
		        var clientsel = $.map($('#iClientRole :selected'), function(e) { return $(e).text(); });
		        document.getElementById('strClientRoleDisplay').value = clientsel ; 
		        setRolePreviewText();
		    });
		
		
		
		$('#strCountry').change(function() {
	        checkCity();
	        var countrysel = $("#strCountry option:selected").text();
	        document.getElementById('strCountryDisplay').value = countrysel ;  
	    });
	    
		if($('#strCountry').val() == "" || $('#strCountry').val() == null){
			//$("#strCountry").val("AE");
   		 	try {
			    $("#strCountry").val("AE");
			  }
			  catch(ex) {
			    //setTimeout("$('" + ctrl + "').val('" + id + "')",1);
			    setTimeout(function(){
				    $("#strCountry").val("AE");
					checkCity();
			        var countrysel = $("#strCountry option:selected").text();
			        document.getElementById('strCountryDisplay').value = countrysel ;
				},1);
			  }
			checkCity();
	        var countrysel = $("#strCountry option:selected").text();
	        document.getElementById('strCountryDisplay').value = countrysel ;
		}	    
		
	
	$.validator.addMethod(
	        "regex",
	        function(value, element, regexp) {
	            
	            var re = new RegExp(regexp);
	            return this.optional(element) || re.test(value);
	        },
	        "Please check your input."
	);


		
		$("#CompanyLicense").validate({

			onfocusout:false,
			onkeyup:false,
			onclick: false,			
			rules : {
				//Step # 1 Rules
				iClientRole : "required",
				strCompNameEng : "required",
				strCompNameArab : "required",
				strCategory : "required",
				strLicenseIssuingAuth : "required",
				strLicenseNumber : "required",
				strLicenseIssueDate : {// compound rule
					required : true,
					date : true					
				},
				strLicenseExpiryDate : {// compound rule
					required : true,
					date : true,
					dateRange:true

				},
				
				//Step # 2 Rules
				
				strPObox : "required",
				strPOBoxLoc : "required",
				strOfficeNo : {
					required :true,
					regex: "^(\\+?([0-9-]){6,14}[0-9])?$"
				},
				strFaxNo : {
					required :true,
					regex: "^(\\+?([0-9-]){6,14}[0-9])?$"
				},
				strEmailAddress: {
				      required: true,
				      email: true
				    },
				strWebsiteURL: {
				        url: true
				      },
				strAddressEng : "required", minlength:1, maxlength: 200,
				strAddressArb : "required", maxlength: 200,
				strCountry : "required", minlength: 1,
				strCity : "required"
				
				//Step # 3 Rules
				//strLicenseCopyURL : "required",
				//strMgrPassportCopyURL : "required"
			},
			
			showErrors : function(errorMap, errorList) {
				
				var errors = '<ul>';
				var label;				
				if (errorList.length) {
					$.each(errorMap, function(name, value) {
						label = $("label[for='" + name + "']").html();
						label = value + '[' + label + ']';
						errors = errors + '<li>' + label + '</li>';
						

					});
					errors = errors + '</ul>';
					jAlert('error', errors, '<spring:message code="label.errormessage" />');
					return false;
				}
			}		
		});

		$("#strLicenseIssueDate,#strLicenseExpiryDate").datepicker({
			changeYear : true,
			changeMonth : true,
			dateFormat : 'dd/mm/yy',
			yearRange : '-50:+10',
			showButtonPanel : true,
			closeText : 'X'
		});

		

		$('#step-1-next-btn').click(function() { // bind click event to link			
			$tabs.tabs('select', 1);
			return false;
		});
		$('#step-2-next-btn').click(function() { // bind click event to link			
			$tabs.tabs('select', 2); 
			return false;
		});
		$('#step-2-prev-btn').click(function() { // bind click event to link
			$tabs.tabs('select', 0); 
			return false;
		});
		
		$('#step-3-next-btn').click(function() { // bind click event to link			
			$tabs.tabs('select', 3); 
			return false;
		});
		$('#step-3-prev-btn').click(function() { // bind click event to link
			$tabs.tabs('select', 1); 
			return false;
		});
		$('#step-4-prev').click(function() { // bind click event to link
			$tabs.tabs('select', 2); 
			return false;
		});
	});

	function validate() {
		var selected = $tabs.tabs('option', 'selected'); // => 0		
		
		if(selected == 0)
		{
			return ($("#CompanyLicense").validate().element("#iClientRole")
					&& $("#CompanyLicense").validate().element("#strCompNameEng")
					&& $("#CompanyLicense").validate().element("#strCompNameArab")
					&& $("#CompanyLicense").validate().element("#strCategory")
					&& $("#CompanyLicense").validate().element("#strLicenseIssuingAuth")
					&& $("#CompanyLicense").validate().element("#strLicenseNumber")
					&& $("#CompanyLicense").validate().element("#strLicenseIssueDate")
					&& $("#CompanyLicense").validate().element("#strLicenseExpiryDate"));
		}
		if(selected == 1)
		{
			return ($("#CompanyLicense").validate().element("#strPObox") 
					&& $("#CompanyLicense").validate().element("#strPOBoxLoc")
					&& $("#CompanyLicense").validate().element("#strOfficeNo")
					&& $("#CompanyLicense").validate().element("#strFaxNo")
					&& $("#CompanyLicense").validate().element("#strEmailAddress")
					&& $("#CompanyLicense").validate().element("#strWebsiteURL")
					&& $("#CompanyLicense").validate().element("#strAddressArb")
					&& $("#CompanyLicense").validate().element("#strAddressEng")
					&& $("#CompanyLicense").validate().element("#strCountry")					
					&& $("#CompanyLicense").validate().element("#strCity"));
		}
		if(selected == 2)
		{
			/*return ($("#CompanyLicense").validate().element("#strLicenseCopyURL") 
					&& $("#CompanyLicense").validate().element("#strMgrPassportCopyURL"));*/
		}
	
	}
	
	//To delete the Temp Files
	function delTempPic(type){
		$('.'+type).remove();	
	}
	
	
</script>
<div id="tabs">
<ul>
	<li><a href="#step-1"><span><spring:message
					code="label.company.license" />
		</span>
	</a>
	</li>
	<li><a href="#step-2"><span><spring:message
					code="label.contact.location" />
		</span>
	</a>
	</li>
	<li><a href="#step-3"><span><spring:message
					code="label.company.uploaddocuments" />
		</span>
	</a>
	</li>
	<li><a href="#step-4"><span><spring:message
					code="label.preview.submit" />
		</span>
	</a>
	</li>
</ul>

<div id="container">
	<form:form name="CompanyLicense" id="CompanyLicense" method="POST"
		enctype="multipart/form-data"
		modelAttribute="<%=ConstantsAdmin.NON_CLIENT_COMPANY_REGISTRATION_LICENSE_INFO_REQUEST_MODEL_KEY %>"
		class="t_form t_fin-black-txt">

		<spring:hasBindErrors
			name="<%=ConstantsAdmin.NON_CLIENT_COMPANY_REGISTRATION_LICENSE_INFO_REQUEST_MODEL_KEY %>">
			<script type="text/javascript">
	$(document).ready(
			function() {
				jAlert('error', '<li><form:errors path="*" delimiter="<li>"/>',
						'<spring:message code="label.errormessage" />');
			});
</script>
		</spring:hasBindErrors>

		<div id="step-1" class="tabcontent">
			<fieldset>
				<legend>
					<spring:message code="label.company.nameinfo" />
				</legend>
			</fieldset>

			<div class="t_form-left">
				<div class="fm-req">
					<form:label path="iClientRole">
					<span class="t_star">*</span>
						<spring:message code="label.company.role" />
						<br>
						<span style="font-size: xx-small; font-weight: normal;"><spring:message
								code="label.company.role.hint" />
						</span>
					</form:label>
					<c:choose>
						<c:when
							test='${requestScope.requestContextAttribute.locale.language == "ar"}'>

							<form:select id="iClientRole" path="iClientRole" multiple="true"
								cssStyle="height:100px;" class="fm-opt">
								<form:options
									items="${nonClientCompanyRegistrationClientRolesList}"
									itemValue="id" itemLabel="labelAr" delimiter="<br/>" />
							</form:select>
						</c:when>
						<c:otherwise>
							<form:select id="iClientRole" path="iClientRole" multiple="true"
								cssStyle="height:100px;" class="fm-opt" >
								<form:options
									items="${nonClientCompanyRegistrationClientRolesList}"
									itemValue="id" itemLabel="labelEn" delimiter="<br/>" />
							</form:select>
						</c:otherwise>
					</c:choose>
				</div>

				<div class="fm-req">
					<form:label path="strCompNameEng">
					<span class="t_star">*</span>
						<spring:message code="label.company.nameeng" />
					</form:label>
					<form:input path="strCompNameEng" id="strCompNameEng" size="30"
						maxlength="100" cssClass="step" />
				</div>


				<div class="fm-req">
					<form:label path="strCompNameArab">
					<span class="t_star">*</span>
						<spring:message code="label.company.namearab" />
					</form:label>
					<form:input path="strCompNameArab" id="strCompNameArab" size="30"
						maxlength="100" />
				</div>


				<div class="fm-req">
					<form:label path="strCategory">
					<span class="t_star">*</span>
						<spring:message code="label.client.category" />
					</form:label>
					<c:choose>
						<c:when
							test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
							<form:select path="strCategory" items="${clientCategoryList}"
								id="strCategory" itemLabel="labelAr" itemValue="id"
								class="fm-opt" />
						</c:when>
						<c:otherwise>
							<form:select path="strCategory" items="${clientCategoryList}"
								id="strCategory" itemLabel="labelEn" itemValue="id"
								class="fm-opt" />
						</c:otherwise>
					</c:choose>
				</div>
			</div>
			<fieldset>
				<legend>
					<spring:message code="label.company.licenseinfo" />
				</legend>
			</fieldset>
			<div class="t_form-left">

				<div class="fm-req">
					<form:label path="strLicenseIssuingAuth">
					<span class="t_star">*</span>
						<spring:message code="label.company.lia" />
					</form:label>
					<c:choose>
						<c:when
							test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
							<form:select path="strLicenseIssuingAuth"
								items="${nonClientCompanyRegistrationClientLicIssueAuthList}"
								id="strLicenseIssuingAuth" itemLabel="labelAr" itemValue="id"
								class="fm-opt" />
						</c:when>
						<c:otherwise>
							<form:select path="strLicenseIssuingAuth"
								items="${nonClientCompanyRegistrationClientLicIssueAuthList}"
								id="strLicenseIssuingAuth" itemLabel="labelEn" itemValue="id"
								class="fm-opt" />
						</c:otherwise>
					</c:choose>
				</div>


				<div class="fm-req">
					<form:label path="strLicenseNumber">
					<span class="t_star">*</span>
						<spring:message code="label.company.lno" />
					</form:label>
					<form:input path="strLicenseNumber" id="strLicenseNumber"
						name="LicNum" size="20" maxlength="100" />
				</div>


				<div>
					<form:label path="strLicenseType">
					<span class="t_star">&nbsp;</span>
						<spring:message code="label.company.lictype" />
					</form:label>
					<c:choose>
						<c:when
							test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
							<form:select path="strLicenseType"
								items="${nonClientCompanyRegistrationClientLicTypeList}"
								id="strLicenseType" itemLabel="labelAr" itemValue="id"
								class="fm-opt" />
						</c:when>
						<c:otherwise>
							<form:select path="strLicenseType"
								items="${nonClientCompanyRegistrationClientLicTypeList}"
								id="strLicenseType" itemLabel="labelEn" itemValue="id"
								class="fm-opt" />
						</c:otherwise>
					</c:choose>
				</div>


				<div class="fm-req">
					<form:label path="strLicenseIssueDate">
					<span class="t_star">*</span>
						<spring:message code="label.company.lid" />
					</form:label>
					<span id="dateInput"><form:input path="strLicenseIssueDate"
							id="strLicenseIssueDate" size="30" />
					</span>
				</div>


				<div class="fm-req">
					<form:label path="strLicenseExpiryDate">
					<span class="t_star">*</span>
						<spring:message code="label.company.led" />
					</form:label>
					<span id="dateInput"><form:input path="strLicenseExpiryDate"
							id="strLicenseExpiryDate" size="30" />
					</span>
				</div>
			</div>
			<div id="fm-submit" class="fm-req">
					<input
						type="button" name="step-1-next-btn"
						value="<spring:message code="label.button.next" />"
						id="step-1-next-btn" class="t_btns next"/>
					<input type="reset" name="reset"
						value="<spring:message code="label.button.reset" />" class="t_btns reset"/> 
			</div>
		</div>
		<div id="step-2" class="tabcontent">
			<fieldset>
				<legend>
					<spring:message code="label.contact.information" />
				</legend>
			</fieldset>

			<div class="t_form-left">
				<div class="fm-req">
					<form:label path="strPObox">
						<span class="t_star">*</span>
						<spring:message code="label.company.poboxnumber" />
					</form:label>
					<form:input path="strPObox" id="strPObox" size="20" maxlength="100" />


				</div>


				<div class="fm-req">
					<form:label path="strPOBoxLoc">
					<span class="t_star">*</span>
						<spring:message code="label.company.poboxlocation" />
					</form:label>
					<form:input path="strPOBoxLoc" id="strPOBoxLoc" size="20"
						maxlength="100" />
				</div>


				<div class="fm-req">
					<form:label path="strOfficeNo">
					<span class="t_star">*</span>
						<spring:message code="label.company.telnooffice" />
					</form:label>
					<form:input path="strOfficeNo" id="strOfficeNo" size="20"
						maxlength="100" />
				</div>


				<div class="fm-req">
					<form:label path="strFaxNo">
					<span class="t_star">*</span>
						<spring:message code="label.company.faxnooffice" />
					</form:label>
					<form:input path="strFaxNo" id="strFaxNo" size="20" maxlength="100" />
				</div>


				<div>
					<form:label path="strWebsiteURL">
					<span class="t_star">&nbsp;</span>
						<spring:message code="label.company.websiteurl" />
					</form:label>
					<form:input path="strWebsiteURL" id="strWebsiteURL" size="20"
						maxlength="100" />
				</div>

				<div class="fm-req">
					<form:label path="strEmailAddress">
					<span class="t_star">*</span>
						<spring:message code="label.company.emailaddress" />
					</form:label>
					<form:input path="strEmailAddress" id="strEmailAddress" size="20"
						maxlength="100" />
				</div>

			</div>


			<fieldset>
				<legend>
					<spring:message code="label.location.information" />
				</legend>
			</fieldset>
			
			<div class="t_form-left">
				<div class="fm-req">
					<form:label path="strAddressEng">
					<span class="t_star">*</span>
						<spring:message code="label.company.addresseng" />
					</form:label>
					<form:textarea path="strAddressEng" id="strAddressEng"
						cssStyle="width:190px;height:100px;" class="fm-opt"></form:textarea>
				</div>

				<div class="fm-req">
					<form:label path="strAddressArb">
					<span class="t_star">*</span>
						<spring:message code="label.company.addressarab" />
					</form:label>
					<form:textarea path="strAddressArb" id="strAddressArb"
						cssStyle="width:190px;height:100px;" class="fm-opt"></form:textarea>
				</div>


				<div class="fm-req">
					<form:label path="strCountry">
					<span class="t_star">*</span>
						<spring:message code="label.company.countryeng" />
					</form:label>
					<c:choose>
						<c:when
							test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
							<form:select path="strCountry" items="${countryList}"
								id="strCountry" itemLabel="labelAr" itemValue="id"
								class="fm-opt" />
						</c:when>
						<c:otherwise>
							<form:select path="strCountry" items="${countryList}"
								id="strCountry" itemLabel="labelEn" itemValue="id"
								class="fm-opt" />
						</c:otherwise>
					</c:choose>
				</div>


				<div class="fm-req">
					<form:label path="strCity">
					<span class="t_star">*</span>
						<spring:message code="label.company.cityeng" />
					</form:label>
					<c:choose>
						<c:when
							test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
							<form:select path="strCity" items="${cityList}"
								onchange="onCityChange()" id="strCity" itemLabel="labelAr"
								itemValue="id" class="fm-opt" />
						</c:when>
						<c:otherwise>
							<form:select path="strCity" items="${cityList}"
								onchange="onCityChange()" id="strCity" itemLabel="labelEn"
								itemValue="id" class="fm-opt" />
						</c:otherwise>
					</c:choose>
				</div>
			</div>
				<div id="fm-submit" class="fm-req">
						<input
						type="button" name="step-2-next-btn" id="step-2-next-btn"
						value="<spring:message code="label.button.next" />" class="t_btns next"/> 
						<input
						type="button" name="step-2-prev-btn" id="step-2-prev-btn"
						value="<spring:message code="label.button.previous" />" class="t_btns previous"/> 
						<input type="reset" name="reset"
						value="<spring:message code="label.button.reset" />" class="t_btns reset"/>						
				</div>
		</div>

		<div id="step-3" class="tabcontent">
			<fieldset>

				<%
					if ((request.getAttribute(ConstantsAdmin.SUCCESS_PARAM) != null)
								|| (request.getAttribute(ConstantsAdmin.ERROR_PARAM) != null)) {
							if (request.getAttribute(ConstantsAdmin.SUCCESS_PARAM) != null) {
				%>
				<h4>
					<%
						String doc = (String) request
											.getAttribute(ConstantsAdmin.SUCCESS_PARAM);
									if (doc.equals("LIC")) {
					%>
					<spring:message code="label.lic.copy" />
					<%
						} else if (doc.equals("MGR_PASS")) {
					%>
					<spring:message code="label.manager.passport.copy" />
					<%
						}
					%>
						<spring:message code="succss.document.upload" />
				</h4>
				<%
					}
				%>
				<script type="text/javascript">
		  				$().ready(function() {
		  					var $tabs = $("#tabs").tabs();
		  					$tabs.tabs('select', 2);
		  				});
		  				</script>
				<%
					}
				%>
				<legend>
					<spring:message code="label.company.uploaddocuments" />
				</legend>
			</fieldset>
			<br>
			<br>
			<br>

			<div>
				<div class="fm-gen">
					<br/>
					<form:label path="strUploadDocumentType" cssStyle="width:300px;">
					<span class="t_star">&nbsp;</span>
						<spring:message code="label.company.uploaddocumentstype" />
					</form:label>
					<c:choose>
						<c:when
							test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
							<form:select path="strUploadDocumentType"
								items="${nonClientRegistrationUploadDocumentType}"
								id="strUploadDocumentType" itemLabel="labelAr" itemValue="id"
								cssStyle="width:230px;" class="fm-opt float" />
						</c:when>
						<c:otherwise>
							<form:select path="strUploadDocumentType"
								items="${nonClientRegistrationUploadDocumentType}"
								id="strUploadDocumentType" itemLabel="labelEn" itemValue="id"
								cssStyle="width:230px;" class="fm-opt float" />
						</c:otherwise>
					</c:choose>
				</div>
				<div style="clear:both"></div>
				<div class="fm-req">
				<div class="t_form-left"><input type="file" id="files[0]"
					name="files[0]" size="25" style="width:250px;"/>
					
					<input class="submit" type="submit" name="Upload"
						value="<spring:message code="label.button.upload" />" />
					</div>
				
					
				</div>
				<br>
				<div style="clear:both"></div>
				<div id="fm-submit" class="fm-req">
					<input
						type="submit" name="next"
						value="<spring:message code="label.button.next" />" class="t_btns next"/>
				
					<input type="button" name="step-3-prev-btn" id="step-3-prev-btn"
						value="<spring:message code="label.button.previous" />" class="t_btns previous"/> 
				</div>
				<div style="clear:both"></div>
				<div id="fm-req">
					<table id="docTable">
						<c:forEach
							items="${nonClientCompanyRegistrationLicenseInfo.arrDocumentVOs}"
							var="mapping" varStatus="loop">
							<tr class="${mapping.strUploadDocumentType}">
								<c:choose>
									<c:when test="${mapping.strUploadDocumentType == 'LIC'}">
										<td><spring:message code="label.company.licensecopy" />
										</td>
										<td width="10px"></td>
										<td><a
											href="file/tempview.htm?tempFileName=${mapping.strTempFileName}"
											class="view"><spring:message
													code="label.user.request.view" />
										</a>
										</td>
										<td>
										<a
											href="#" class="deleteDoc"><spring:message
													code="label.button.delete" />
										</a>
										</td>
									</c:when>
									<c:otherwise>
										<td><spring:message
												code="label.company.managerpassportcopy" />
										</td>
										<td width="10px"></td>
										<td><a
											href="file/tempview.htm?tempFileName=${mapping.strTempFileName}"
											class="view"><spring:message
													code="label.user.request.view" />
										</a>
										</td>
										<td>
										<a
											href="#" class="deleteDoc"><spring:message
													code="label.button.delete" />
										</a>
										</td>
										<br>
										<br>
									</c:otherwise>
								</c:choose>
							</tr>

						</c:forEach>
					</table>
				</div>

				<%
					if (request.getAttribute("uploadnext") != null) {
				%>
				<script type="text/javascript">
		  				$().ready(function() {
		  					var $tabs = $("#tabs").tabs();
		  					$tabs.tabs('select', 2);
		  				});
		  				</script>
				<%
					}
				%>

			</div>
		</div>


		<div id="step-4" class="tabcontent">


			<fieldset>
				<legend>
					<spring:message code="label.company.license" />
				</legend>
				</fieldset>
			<div class="t_form-left" style="width: 500px;">
				<%
					if (request.getAttribute("preview") != null) {
				%>
				<script type="text/javascript">
		  				$().ready(function() {
		  					var $tabs = $("#tabs").tabs();
		  					$tabs.tabs('select', 3);
		  				});
	</script>
				<%
					}
				%>

				<div class="fm-req">
					<form:label path="strClientRoleDisplay">
						<spring:message code="label.company.role" />
					</form:label>

					<span id="roleDisplay" style="display: block;" class="float"></span>

				</div>

				<div style="clear: both"></div>

				<div class="fm-req">
					<form:label path="strCompNameEng">
						<spring:message code="label.company.nameeng" />
					</form:label>
					<c:out
						value="${nonClientCompanyRegistrationLicenseInfo.strCompNameEng}" />
					<br />
				</div>
					<br />
				<div style="clear: both"></div>
				<div class="fm-req">
					<form:label path="strCompNameArab">
						<spring:message code="label.company.namearab" />
					</form:label>
					<c:out
						value="${nonClientCompanyRegistrationLicenseInfo.strCompNameArab}" />
					<br />
				</div>

				<div style="clear: both"></div>
				<div class="fm-req">
					<form:label path="strCategory">
						<spring:message code="label.client.category" />
					</form:label>
					<c:out
						value="${nonClientCompanyRegistrationLicenseInfo.strClientCategoryDisplay}" />
					<br />
				</div>

				<div style="clear: both"></div>
				<div class="fm-req">
					<form:label path="strLicenseIssueAuthDisplay">
						<spring:message code="label.company.lia" />
					</form:label>
					<c:out
						value="${nonClientCompanyRegistrationLicenseInfo.strLicenseIssueAuthDisplay}" />
					<br />
				</div>

				<div style="clear: both"></div>
				<div class="fm-req">
					<form:label path="strLicenseNumber">
						<spring:message code="label.company.lno" />
					</form:label>
					<c:out
						value="${nonClientCompanyRegistrationLicenseInfo.strLicenseNumber}" />
					<br />
				</div>

				<div class="fm-req">
					<form:label path="strLicenseTypeDisplay">
						<spring:message code="label.company.lictype" />
					</form:label>
					<c:out
						value="${nonClientCompanyRegistrationLicenseInfo.strLicenseTypeDisplay}" />
					<br />
				</div>
				<div style="clear: both"></div>
				<div class="fm-req">
					<form:label path="strLicenseIssueDate">
						<spring:message code="label.company.lid" />
					</form:label>
					<fmt:formatDate pattern="dd-MM-yyyy"
						value="${nonClientCompanyRegistrationLicenseInfo.strLicenseIssueDate}"
						var="newdatevarissue" />
					<c:out value="${newdatevarissue}" />
					<br />
				</div>
				<div style="clear: both"></div>
				<div class="fm-req">
					<form:label path="strLicenseExpiryDate">
						<spring:message code="label.company.led" />
					</form:label>
					<fmt:formatDate pattern="dd-MM-yyyy"
						value="${nonClientCompanyRegistrationLicenseInfo.strLicenseExpiryDate}"
						var="newdatevarexpiry" />
					<c:out value="${newdatevarexpiry}" />
				</div>
				<div style="clear: both"></div>

			</div>


			<fieldset>
				<legend>
					<spring:message code="label.contact.location" />
				</legend>
			</fieldset>
			<div class="t_form-left">


				<div class="fm-req">
					<form:label path="strPObox">
						<spring:message code="label.company.poboxnumber" />
					</form:label>
					<c:out value="${nonClientCompanyRegistrationLicenseInfo.strPObox}" />
					<br />
				</div>
				<div style="clear: both"></div>
				<div class="fm-req">
					<form:label path="strPOBoxLoc">
						<spring:message code="label.company.poboxlocation" />
					</form:label>
					<c:out
						value="${nonClientCompanyRegistrationLicenseInfo.strPOBoxLoc}" />
					<br />
				</div>

				<div style="clear: both"></div>

				<div class="fm-req">
					<form:label path="strOfficeNo">
						<spring:message code="label.company.telnooffice" />
					</form:label>
					<c:out
						value="${nonClientCompanyRegistrationLicenseInfo.strOfficeNo}" />
					<br />
				</div>

				<div style="clear: both"></div>
				<div class="fm-req">
					<form:label path="strFaxNo">
						<spring:message code="label.company.faxnooffice" />
					</form:label>
					<c:out value="${nonClientCompanyRegistrationLicenseInfo.strFaxNo}" />
					<br />
				</div>

				<div style="clear: both"></div>

				<div>
					<form:label path="strWebsiteURL">
						<spring:message code="label.company.websiteurl" />
					</form:label>
					<c:out
						value="${nonClientCompanyRegistrationLicenseInfo.strWebsiteURL}" />
					<br />
				</div>

				<div style="clear: both"></div>

				<div class="fm-req">
					<form:label path="strEmailAddress">
						<spring:message code="label.company.emailaddress" />
					</form:label>
					<c:out
						value="${nonClientCompanyRegistrationLicenseInfo.strEmailAddress}" />
					<br />
				</div>

				<div style="clear: both"></div>
				<div class="fm-req" style="clear:both">
					<form:label path="strAddressEng">
						<spring:message code="label.company.addresseng" />
					</form:label>
					<c:out
						value="${nonClientCompanyRegistrationLicenseInfo.strAddressEng}" />
					<br />
				</div>

				<div style="clear: both"></div>

				<div class="fm-req">
					<form:label path="strAddressArb">
						<spring:message code="label.company.addressarab" />
					</form:label>
					<c:out
						value="${nonClientCompanyRegistrationLicenseInfo.strAddressArb}" />
					<br />
				</div>


				<div style="clear: both"></div>
				<div class="fm-req">
					<form:label path="strCountryDisplay">
						<spring:message code="label.company.countryeng" />
					</form:label>
					<c:out
						value="${nonClientCompanyRegistrationLicenseInfo.strCountryDisplay}" />
					<br />
				</div>


				<div style="clear: both"></div>
				<div class="fm-req">
					<form:label path="strCityDisplay">
						<spring:message code="label.company.cityeng" />
					</form:label>
					<c:out
						value="${nonClientCompanyRegistrationLicenseInfo.strCityDisplay}" />
					<br />
				</div>
				<div style="clear: both"></div>

				<form:hidden path="hiddenCityVal" id="hiddenCityVal" />

				<form:hidden path="strClientRoleDisplay" id="strClientRoleDisplay" />

				<form:hidden path="strClientCategoryDisplay"
					id="strClientCategoryDisplay" />

				<form:hidden path="strLicenseTypeDisplay" id="strLicenseTypeDisplay" />

				<form:hidden path="strCountryDisplay" id="strCountryDisplay" />

				<form:hidden path="strCityDisplay" id="strCityDisplay" />

				<form:hidden path="strLicenseIssueAuthDisplay"
					id="strLicenseIssueAuthDisplay" />

				<form:hidden path="strLicenseCopyName" id="strLicenseCopyName"
					size="20" maxlength="100" />
				<form:hidden path="strLicenseCopyURL" id="strLicenseCopyURL"
					size="20" maxlength="100" />

				<form:hidden path="strMgrPassportCopyName"
					id="strMgrPassportCopyName" size="20" maxlength="100" />
				<form:hidden path="strMgrPassportCopyURL" id="strMgrPassportCopyURL"
					size="20" maxlength="100" />



			</div>
			<fieldset>
				<legend>
					<spring:message
						code="label.nonclient.person.register.documents.details" />
				</legend>
			</fieldset>
			<div class="t_form-left">
				<div class="fm-req">
					<table border="0">

						<c:forEach
							items="${nonClientCompanyRegistrationLicenseInfo.arrDocumentVOs}"
							var="mapping" varStatus="loop">
							<tr>
								<c:choose>
									<c:when test="${mapping.strUploadDocumentType == 'LIC'}">
										<td><spring:message code="label.company.licensecopy" />
										</td>
										<td width="10px"></td>
										<td><a
											href="file/tempview.htm?tempFileName=${mapping.strTempFileName}"
											class="view"><spring:message
													code="label.user.request.view" />
										</a>
										</td>
									</c:when>
									<c:otherwise>
										<td><spring:message
												code="label.company.managerpassportcopy" />
										</td>
										<td width="10px"></td>
										<td><a
											href="file/tempview.htm?tempFileName=${mapping.strTempFileName}"
											class="view"><spring:message
													code="label.user.request.view" />
										</a>
										</td>
										<br>
										<br>
									</c:otherwise>
								</c:choose>
							</tr>
						</c:forEach>

					</table>

				</div>


			</div>
				<div id="fm-submit" class="fm-req">
					<input
						type="submit" name="submit"
						value="<spring:message code="label.button.submit" />" class="t_btns submit"/>

					<input type="button" name="step-4-prev" id="step-4-prev"
						value="<spring:message code="label.button.previous" />" class="t_btns previous"/> 
				</div>
			
			<span id="docElmts">
			<c:forEach
				items="${nonClientCompanyRegistrationLicenseInfo.arrDocumentVOs}"
				var="mapping" varStatus="loop">
				<form:hidden path="arrDocumentVOs[${loop.index}].strName"
					value="${arrDocumentVOs.strName}"
					class="${mapping.strUploadDocumentType}" />
				<form:hidden path="arrDocumentVOs[${loop.index}].URL"
					value="${arrDocumentVOs.URL}"
					class="${mapping.strUploadDocumentType}" />
				<form:hidden
					path="arrDocumentVOs[${loop.index}].strUploadDocumentType"
					value="${arrDocumentVOs.strUploadDocumentType}"
					class="${mapping.strUploadDocumentType}" />
				<form:hidden path="arrDocumentVOs[${loop.index}].strTempFileName"
					value="${arrDocumentVOs.strTempFileName}"
					class="${mapping.strUploadDocumentType}" />
				<form:hidden path="arrDocumentVOs[${loop.index}].strExtension"
					value="${arrDocumentVOs.strExtension}"
					class="${mapping.strUploadDocumentType}" />
			</c:forEach>
			</span>
		</div>
	</form:form>
</div>
</div>
